<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                xmlns:p="http://primefaces.org/ui"
                xmlns:o="http://omnifaces.org/ui"
                xmlns:jsf="http://xmlns.jcp.org/jsf">
        <p:fragment>
           <p:autoUpdate/>
        <ui:repeat value="#{DatasetPage.vocabScripts}" var="vocabScriptUrl">
           <script src="#{vocabScriptUrl}?version=#{systemConfig.getVersion()}"/>
        </ui:repeat>
        </p:fragment>
        <c:set var="cvocConf" value="#{settingsWrapper.getCVocConf(false)}"/>
    <!-- View Mode -->
    <div class="panel-group" jsf:rendered="${empty editMode  or managePage}">
        <o:importFunctions type="edu.harvard.iq.dataverse.util.MarkupChecker" />
        <p>
            <h:outputFormat rendered="#{!(empty mdLang and mdlangCode!='undefined')}" value="#{bundle['dataset.metadatalanguage.view.guidance']}" escape="false">
                <f:param value="#{mdLang}"/>
            </h:outputFormat>
        </p>
        <ui:repeat value="#{metadataBlocks}"
                   var="metadataBlockVal" varStatus="block">
            <div class="panel panel-default">
                <div data-toggle="collapse" data-target="#panelCollapse#{block.index}" class="panel-heading text-info">
                    #{metadataBlockVal.key.localeDisplayName} &#160;<span class="glyphicon #{block.first?'glyphicon-chevron-up':'glyphicon-chevron-down'}"/>
                </div>
                <div id="panelCollapse#{block.index}" class="collapse #{block.first?'in':''}">
                    <div class="panel-body metadata-container">
                        <table class="metadata">
                            <tbody>
                                <ui:fragment rendered="#{block.index == '0' and datasetPage}">
                                    <tr id="metadata_persistentId">
                                        <th scope="row">
                                            #{bundle['dataset.metadata.persistentId']}
                                            <span class="glyphicon glyphicon-question-sign tooltip-icon"
                                                  data-toggle="tooltip" data-placement="auto right" data-original-title="#{bundle['dataset.metadata.persistentId.tip']}"></span>
                                        </th>
                                        <td>#{globalId}</td>
                                    </tr>
                                    <tr id="metadata_alternativePersistentId" jsf:rendered="#{!empty altPID}">
                                        <th scope="row">
                                            #{bundle['dataset.metadata.alternativePersistentId']}
                                            <span class="glyphicon glyphicon-question-sign tooltip-icon"
                                                  data-toggle="tooltip" data-placement="auto right" data-original-title="#{bundle['dataset.metadata.alternativePersistentId.tip']}"></span>
                                        </th>
                                        <td>#{altPID}</td>
                                    </tr>
                                    <tr id="metadata_publicationDate" jsf:rendered="#{!empty publicationDate}">
                                        <th scope="row">
                                            #{bundle['dataset.metadata.publicationDate']}
                                            <span class="glyphicon glyphicon-question-sign tooltip-icon"
                                                  data-toggle="tooltip" data-placement="auto right" data-original-title="#{bundle['dataset.metadata.publicationDate.tip']}"></span>
                                        </th>
                                        <td>#{publicationDate}</td>
                                    </tr>
                                    <tr id="metadata_citationDate" jsf:rendered="#{!empty citationDate and (publicationDate ne citationDate)}">
                                        <th scope="row">
                                            #{bundle['dataset.metadata.citationDate']}
                                            <span class="glyphicon glyphicon-question-sign tooltip-icon"
                                                  data-toggle="tooltip" data-placement="auto right" data-original-title="#{bundle['dataset.metadata.citationDate.tip']}"></span>
                                        </th>
                                        <td>#{citationDate}</td>
                                    </tr>
                                </ui:fragment>
                                <ui:repeat value="#{metadataBlockVal.value}" var="dsf">
                                    <tr id="metadata_#{dsf.datasetFieldType.name}">
                                        <th scope="row">
                                            #{dsf.datasetFieldType.localeTitle}
                                            <span class="glyphicon glyphicon-question-sign tooltip-icon"
                                                  data-toggle="tooltip" data-placement="auto right" data-original-title="#{dsf.datasetFieldType.localeDescription}"></span>
                                        </th>
                                        <c:set var="cvocOnDsf" value="#{cvocConf.containsKey(dsf.datasetFieldType.id)}"/>
                                        <td jsf:rendered="#{!anonymized or !settingsWrapper.shouldBeAnonymized(dsf)}">
                                            <!-- Primitive datasetFields -->
                                            <ui:fragment rendered="#{dsf.datasetFieldType.primitive}">
                                                <ui:fragment rendered="#{managePage or templatePage}">
                                                  <div>
                                                    <h:outputLabel for="instr_view" value="#{bundle['template.instructions.label']}" class="italic normal-text margin-right"/>
                                                    <h:outputText id="instr_view" value="#{template.getInstructionsFor(dsf.datasetFieldType.name)}"/>
                                                  </div>
                                                </ui:fragment>
                                                <h:outputText value="#{dsf.value}"
                                                    rendered="#{!dsf.datasetFieldType.allowMultiples and cvocOnDsf}"
                                                    escape="#{dsf.datasetFieldType.isEscapeOutputText()}">
                                                    <f:passThroughAttribute name="lang" value="#{DatasetPage.getFieldLanguage(cvocConf.get(dsf.datasetFieldType.id).getString('languages'))}" />
                                                    <f:passThroughAttribute name="data-cvoc-service-url" value="#{cvocConf.get(dsf.datasetFieldType.id).getString('cvoc-url','')}" />
                                                    <f:passThroughAttribute name="data-cvoc-headers" value="#{cvocConf.get(dsf.datasetFieldType.id).containsKey('headers') ? cvocConf.get(dsf.datasetFieldType.id).get('headers').toString() : '{}'}"/>
                                                    <f:passThroughAttribute name="data-cvoc-protocol" value="#{cvocConf.get(dsf.datasetFieldType.id).getString('protocol','')}" />
                                                    <f:passThroughAttribute name="data-cvoc-managedfields" value="#{cvocConf.get(dsf.datasetFieldType.id).get('managed-fields').toString()}" />
                                                </h:outputText>
                                                <h:outputText value="#{dsf.getDisplayValue(mdLangCode)}"
                                                    rendered="#{!dsf.datasetFieldType.allowMultiples and !cvocOnDsf}"
                                                    escape="#{dsf.datasetFieldType.isEscapeOutputText()}"/>
                                                <ui:repeat value="#{dsf.getValues_nondisplay()}" var="value" varStatus="loop" rendered="#{dsf.datasetFieldType.allowMultiples and cvocOnDsf}">
                                                    <h:outputText value="#{loop.first?'':'; '}"/>
                                                    <h:outputText value="#{ value }"
                                                                  escape="#{dsf.datasetFieldType.isEscapeOutputText()}">
                                                        <f:passThroughAttribute name="lang" value="#{DatasetPage.getFieldLanguage(cvocConf.get(dsf.datasetFieldType.id).getString('languages'))}" />
                                                        <f:passThroughAttribute name="data-cvoc-service-url" value="#{cvocConf.get(dsf.datasetFieldType.id).getString('cvoc-url','')}" />
                                                        <f:passThroughAttribute name="data-cvoc-headers" value="#{cvocConf.get(dsf.datasetFieldType.id).containsKey('headers') ? cvocConf.get(dsf.datasetFieldType.id).get('headers').toString() : '{}'}"/>
                                                        <f:passThroughAttribute name="data-cvoc-protocol" value="#{cvocConf.get(dsf.datasetFieldType.id).getString('protocol','')}" />
                                                        <f:passThroughAttribute name="data-cvoc-managedfields" value="#{cvocConf.get(dsf.datasetFieldType.id).get('managed-fields').toString()}" />
                                                    </h:outputText>
                                                </ui:repeat>
                                                <ui:repeat value="#{dsf.getValues(mdLangCode)}" var="value" varStatus="loop" rendered="#{dsf.datasetFieldType.allowMultiples and !cvocOnDsf}">
                                                    <h:outputText value="#{loop.first?'':'; '}#{ value }"
                                                                  escape="#{dsf.datasetFieldType.isEscapeOutputText()}"/>
                                                </ui:repeat>
                                            </ui:fragment>
                                            <!-- Compound datasetFields -->
                                            <ui:fragment rendered="#{dsf.datasetFieldType.compound}">
                                                <ui:fragment rendered="#{dsf.datasetFieldType.name == 'datasetContact'}">
                                                    <p class="help-block">
                                                        <h:outputText value="#{bundle['dataset.contact.tip']}"/>
                                                    </p>
                                                </ui:fragment>
                                                <ui:fragment rendered="#{managePage or templatePage}">
                                                  <div>
                                                    <h:outputLabel for="compinstr_view" value="#{bundle['template.instructions.label']} " class="italic normal-text margin-right"/>
                                                    <h:outputText id="compinstr_view" value="#{template.getInstructionsFor(dsf.datasetFieldType.name)}"/>
                                                  </div>
                                                </ui:fragment>
          
                                                <ui:repeat value="#{dsf.datasetFieldCompoundValues}" var="compoundValue" varStatus="compoundValuesStatus">
                                                    <c:set var="cvocOnDsfApplies" value="#{compoundValue.hasChildOfType(cvocConf.get(dsf.datasetFieldType.id).getString('term-uri-field'))}"/>
                                                    <ui:repeat value="#{compoundValue.displayValueMap.entrySet().toArray()}" var="cvPart" varStatus="partStatus">
                                                        <c:set var="cvocOnCvPart" value="#{cvocConf.containsKey(cvPart.key.datasetFieldType.id)}"/>
                                                        <h:outputText value="#{dsf.datasetFieldType.displayFormat} " rendered="${!partStatus.first and !settingsWrapper.isCvocField(cvPart.key.datasetFieldType.id)}"/>
                                                        <ui:fragment rendered="#{!cvocOnCvPart and !cvocOnDsfApplies or !settingsWrapper.isCvocField(cvPart.key.datasetFieldType.id)}">
                                                            <ui:fragment rendered="#{compoundValue.isLink(cvPart.key)}">
                                                                <h:outputLink value="#{compoundValue.getLink()}" target="_blank">
                                                                    <h:outputText value="#{cvPart.value}"
                                                                                  escape="#{cvPart.key.datasetFieldType.isEscapeOutputText()}"/>
                                                                </h:outputLink>
                                                            </ui:fragment>
                                                            <ui:fragment rendered="#{not compoundValue.isLink(cvPart.key)}">
                                                                <h:outputText value="#{cvPart.value}"
                                                                              escape="#{cvPart.key.datasetFieldType.isEscapeOutputText()}"/>
                                                            </ui:fragment>
                                                        </ui:fragment>
                                                        <!--  Cvoc for single child field -->
                                                        <h:outputText value="#{cvPart.key.value}"
                                                                      escape="#{cvPart.key.datasetFieldType.isEscapeOutputText()}" 
                                                                      rendered="${cvocOnCvPart and cvPart.key.datasetFieldType.name.equals(cvocConf.get(cvPart.key.datasetFieldType.id).getString('term-uri-field'))}">
                                                                      <f:passThroughAttribute name="lang" value="#{DatasetPage.getFieldLanguage(cvocConf.get(cvPart.key.datasetFieldType.id).getString('languages'))}" />
                                                                      <f:passThroughAttribute name="data-cvoc-service-url" value="#{cvocConf.get(cvPart.key.datasetFieldType.id).getString('cvoc-url','')}" />
                                                                      <f:passThroughAttribute name="data-cvoc-headers" value="#{cvocConf.get(cvPart.key.datasetFieldType.id).containsKey('headers') ? cvocConf.get(cvPart.key.datasetFieldType.id).get('headers').toString() : '{}'}"/>
                                                                      <f:passThroughAttribute name="data-cvoc-protocol" value="#{cvocConf.get(cvPart.key.datasetFieldType.id).getString('protocol','')}" />
                                                                      <!-- unlikely to be used in this case -->
                                                                      <f:passThroughAttribute name="data-cvoc-managedfields" value="#{cvocConf.get(cvPart.key.datasetFieldType.id).get('managed-fields').toString()}" />
                                                                      <f:passThroughAttribute name="data-cvoc-index" value="#{compoundValuesStatus.index}" />
                                                        </h:outputText>
                                                        <!--  Cvoc on parent field -->
                                                        <h:outputText value="#{cvPart.key.value}"
                                                                      escape="#{cvPart.key.datasetFieldType.isEscapeOutputText()}" 
                                                                      rendered="${cvocOnDsf and cvPart.key.datasetFieldType.name.equals(cvocConf.get(dsf.datasetFieldType.id).getString('term-uri-field'))}">
                                                                      <f:passThroughAttribute name="lang" value="#{DatasetPage.getFieldLanguage(cvocConf.get(dsf.datasetFieldType.id).getString('languages'))}" />
                                                                      <f:passThroughAttribute name="data-cvoc-service-url" value="#{cvocConf.get(dsf.datasetFieldType.id).getString('cvoc-url','')}" />
                                                                      <f:passThroughAttribute name="data-cvoc-headers" value="#{cvocConf.get(dsf.datasetFieldType.id).containsKey('headers') ? cvocConf.get(dsf.datasetFieldType.id).get('headers').toString() : '{}'}"/>
                                                                      <f:passThroughAttribute name="data-cvoc-protocol" value="#{cvocConf.get(dsf.datasetFieldType.id).getString('protocol','')}" />
                                                                      <f:passThroughAttribute name="data-cvoc-managedfields" value="#{cvocConf.get(dsf.datasetFieldType.id).get('managed-fields').toString()}" />
                                                                      <f:passThroughAttribute name="data-cvoc-index" value="#{compoundValuesStatus.index}" />
                                                        </h:outputText>
                                                        <!-- Cvoc for others fields -->
                                                        <h:outputText value="#{cvPart.key.value}"
                                                                      escape="#{cvPart.key.datasetFieldType.isEscapeOutputText()}"
                                                                      rendered="#{(cvocOnDsfApplies or cvocOnCvPart) and not (
                                                                            cvPart.key.datasetFieldType.name.equals(cvocConf.get(cvPart.key.datasetFieldType.id).getString('term-uri-field'))
                                                                            or cvPart.key.datasetFieldType.name.equals(cvocConf.get(dsf.datasetFieldType.id).getString('term-uri-field')))}"
                                                                      styleClass="hidden">
                                                            <f:passThroughAttribute name="hidden" value="hidden" />
                                                            <f:passThroughAttribute name="data-cvoc-metadata-name" value="#{cvPart.key.datasetFieldType.name}" />
                                                            <f:passThroughAttribute name="data-cvoc-index" value="#{compoundValuesStatus.index}" />
                                                        </h:outputText>
                                                    </ui:repeat>
                                                    <ui:fragment rendered="#{not compoundValuesStatus.last}">
                                                        <br/>
                                                    </ui:fragment>
                                                </ui:repeat>
                                            </ui:fragment>
                                        </td>
                                        <td jsf:rendered="#{anonymized and settingsWrapper.shouldBeAnonymized(dsf)}">
                                            <h:outputText value="#{bundle['dataset.anonymized.withheld']}"/>
                                        </td>
                                    </tr>
                                </ui:repeat>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </ui:repeat>
    </div>
    <!-- Edit Mode -->
    <ui:fragment rendered="${(!empty editMode)}">
        <p:fragment id="editMetadataFragement">
        <o:importFunctions type="java.util.Collections" />
        <div class="panel-group">
                <p>
                    <h:outputFormat
                        rendered="#{(!empty(mdLang) and mdLangCode!='undefined') and ((editMode == 'CREATE') or (editMode == 'METADATA'))}"
                        value="#{bundle['dataset.metadatalanguage.create.guidance']}"
                        escape="false">
                        <f:param value="#{mdLang}" />
                    </h:outputFormat>
                </p>
                <div class="form-group"
                    jsf:rendered="#{(empty mdLang and mdLangCode=='undefined')}">
                    <h:outputLabel for="dsMetadataLanguage"
                        styleClass="col-md-3 control-label">
                                            #{bundle.metadataLanguage}
                                            <span
                            class="glyphicon glyphicon-question-sign tooltip-icon"
                            data-toggle="tooltip" data-placement="auto right"
                            data-original-title="#{bundle['dataset.metadatalanguage.title']}"></span>
                    </h:outputLabel>
                    <div class="col-md-7 form-col-container">
                        <p class="help-block">
                            #{bundle['dataset.metadatalanguage.tip']}</p>
                        <p:selectOneMenu id="dsMetadataLanguage" styleClass="form-control"
                            value="#{DatasetPage.dataset.metadataLanguage}">
                            <f:selectItems value="#{DatasetPage.getMetadataLanguages()}"
                                var="lang" itemLabel="#{lang.getValue()}"
                                itemValue="#{lang.getKey()}" />
                        </p:selectOneMenu>
                        <p:message for="dsMetadataLanguage" display="text" />
                    </div>
                </div>
                <div class="form-group">
                    <span class="glyphicon glyphicon-asterisk text-danger"/> <h:outputText value="#{bundle['dataset.asterisk.tip']}"/>
                </div>
                <ui:repeat value="#{metadataBlocks}" var="metadataBlockVal" varStatus="block">
                <div class="panel panel-default" jsf:rendered="#{(editMode == 'METADATA' or metadataBlockVal.key.displayOnCreate or !metadataBlockVal.key.isEmpty()
                                                                 or metadataBlockVal.key.isHasRequired())
                                                                 or (!datasetPage)}">
                    <div data-toggle="collapse" data-target="#panelCollapse#{block.index}" class="panel-heading text-info">
                        #{metadataBlockVal.key.localeDisplayName} <span class="glyphicon #{block.first or editMode == 'CREATE' or !cvocConf.isEmpty() ? 'glyphicon-chevron-up' : 'glyphicon-chevron-down'}"/>
                    </div>
                    <div id="panelCollapse#{block.index}" class="collapse #{block.first or editMode == 'CREATE' or !cvocConf.isEmpty() ? 'in' : ''}">
                        <div class="panel-body">
                            <ui:repeat value="#{metadataBlockVal.value}" var="dsf" varStatus="curField">
                                <div class="form-group" role="group"
                                     jsf:rendered="#{((editMode == 'METADATA' or dsf.datasetFieldType.shouldDisplayOnCreate() or !dsf.isEmpty() or dsf.required or dsf.hasRequiredChildren)) or (!datasetPage and dsf.include)}">
                                    <!-- Primitive fields -->
                                    <p:fragment id="editPrimitiveValueFragment" rendered="#{dsf.datasetFieldType.primitive}">
                                        <p:autoUpdate/>
                                        <div>
                                          <h:outputLabel for="#{dsf.datasetFieldType.controlledVocabulary ? (!dsf.datasetFieldType.allowMultiples ? 'unique1_focus' : 'unique2_focus') : ('fieldvaluelist:0:'.concat(((dsf.datasetFieldType.fieldType == 'TEXTBOX') ? 'description' : cvocConf.containsKey(dsf.datasetFieldType.id)? 'cvocInputText': 'inputText')))}" styleClass="col-sm-3 control-label">
                                            #{dsf.datasetFieldType.localeTitle}
                                            <span class="glyphicon glyphicon-asterisk text-danger" jsf:rendered="#{dsf.required}"/>
                                            <span class="glyphicon glyphicon-question-sign tooltip-icon"
                                                  data-toggle="tooltip" data-placement="auto right" data-original-title="#{dsf.datasetFieldType.localeDescription}"></span>
                                          </h:outputLabel>
                                          <ui:fragment rendered="#{templatePage}">
                                            <div class="col-sm-7">
                                              <h:outputLabel for="instr" value="#{bundle['template.instructions.label']} " title="#{bundle['template.instructions.label.tip']}" class="italic normal-text margin-right"/>
                                                <p:inplace id="instr" label="#{TemplatePage.getInstructionsLabelFor(dsf.datasetFieldType.name)}" editor="true">
                                                  <p:inputText value="#{TemplatePage.template.instructionsMap[dsf.datasetFieldType.name]}"/>
                                                </p:inplace>
                                              </div>
                                          </ui:fragment>
                                          <h:outputText class="col-sm-7" value="#{template.getInstructionsFor(dsf.datasetFieldType.name)}" rendered="#{!templatePage and template!=null and not empty template.getInstructionsFor(dsf.datasetFieldType.name)}"/>
                                        </div>
                                        <div class="col-sm-3"/>
                                        <div class="col-sm-9" style="padding-left:2px">
                                          <div class="form-group">
                                            <div class="form-col-container col-sm-12">
                                                <p:repeat value="#{dsf.datasetFieldValues}" var="dsfv" varStatus="valCount" id="fieldvaluelist">
                                                    <div class="form-group dataset-field-values">
                                                        <div class="form-col-container col-sm-9 edit-field">
                                                            <ui:include src="datasetFieldForEditFragment.xhtml">
                                                                <ui:param name="dsfv" value="#{dsfv}"/>
                                                                <ui:param name="dsfvIndex" value="#{valCount.index}"/>
                                                                <ui:param name="cvoc" value="#{cvocConf.containsKey(dsf.datasetFieldType.id)? cvocConf.get(dsf.datasetFieldType.id): null}"/>
                                                            </ui:include>
                                                        </div>
                                                        <!-- Add / Remove buttons -->
                                                        <div class="col-xs-3 field-add-delete" jsf:rendered="#{dsf.datasetFieldType.allowMultiples and !dsf.datasetFieldType.controlledVocabulary}">
                                                            <p:commandLink title="#{bundle.add}"
                                                                           styleClass="btn btn-default btn-sm bootstrap-button-tooltip #{dsf.datasetFieldType.compound ? 'compound-field-btn' : ''}"
                                                                           actionListener="#{dsf.addDatasetFieldValue(valCount.index + 1)}"
                                                                           update=":#{p:resolveClientIds('@id(editPrimitiveValueFragment)', view)}">
                                                                <span class="glyphicon glyphicon-plus no-text"/>
                                                            </p:commandLink>
                                                            <p:commandLink title="#{bundle.delete}"
                                                                           styleClass="btn btn-default btn-sm bootstrap-button-tooltip #{dsf.datasetFieldType.compound ? 'compound-field-btn' : ''}"
                                                                           rendered="#{dsf.datasetFieldValues.size() > 1}"
                                                                           actionListener="#{dsf.removeDatasetFieldValue(valCount.index)}"
                                                                           update=":#{p:resolveClientIds('@id(editPrimitiveValueFragment)', view)}">
                                                                <span class="glyphicon glyphicon-minus no-text"/>
                                                            </p:commandLink>
                                                        </div>
                                                    </div>
                                                </p:repeat>
                                                <ui:fragment rendered="#{dsf.datasetFieldType.controlledVocabulary}">
                                                    <div class="form-group dataset-field-values">
                                                        <div class="form-col-container col-sm-9 edit-field">
                                                            <p:selectOneMenu value="#{dsf.singleControlledVocabularyValue}" converter="controlledVocabularyValueConverter" style="width: auto !important; max-width:100%; min-width:200px;" styleClass="form-control primitive"
                                                                             id="unique1" rendered="#{!dsf.datasetFieldType.allowMultiples}" filter="#{(dsf.datasetFieldType.controlledVocabularyValues.size() lt 10) ? 'false':'true'}" filterMatchMode="contains">
                                                                <f:selectItem itemLabel="#{bundle.select}" itemValue="" noSelectionOption="true"/>
                                                                <f:selectItems value="#{dsf.datasetFieldType.controlledVocabularyValues}" var="cvv" itemLabel="#{cvv.getLocaleStrValue(mdLangCode)}" itemValue="#{cvv}"/>
                                                            </p:selectOneMenu>
                                                            <!--
                                                            <p:outputPanel id="selectedValsList" style="padding-top:.5em;">
                                                                <ui:repeat value="#{dsf.controlledVocabularyValues}" var="cvv" rendered="#{!empty dsf.controlledVocabularyValues}">
                                                                   <h:outputText value="#{cvv.getLocaleStrValue(mdLangCode)}"  style="margin-right:.5em;display:inline-block;"/>
                                                                </ui:repeat>
                                                            </p:outputPanel>
                                                            -->
                                                            <p:selectCheckboxMenu value="#{dsf.controlledVocabularyValues}" converter="controlledVocabularyValueConverter" styleClass="form-control"
                                                                                  filter="#{(dsf.datasetFieldType.controlledVocabularyValues.size() lt 10) ? 'false':'true'}" filterMatchMode="contains" label="#{bundle.select}"  multiple="true" showHeader="#{(dsf.datasetFieldType.controlledVocabularyValues.size() lt 10) ? 'false':'true'}" 
                                                                                  id="unique2" rendered="#{dsf.datasetFieldType.allowMultiples}">
                                                                <f:selectItems value="#{dsf.datasetFieldType.controlledVocabularyValues}" var="cvv" itemLabel="#{cvv.getLocaleStrValue(mdLangCode)}" itemValue="#{cvv}"/>
                                                            </p:selectCheckboxMenu>
                                                            <div class="ui-message ui-message-error ui-widget ui-corner-all" aria-live="polite" jsf:rendered="#{!empty dsf.validationMessage}">
                                                                <span class="ui-message-error-detail">#{dsf.validationMessage}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </ui:fragment>
                                            </div>
                                          </div>
                                        </div>
                                    </p:fragment>
                                    <!-- Compound fields -->
                                    <p:fragment id="editCompoundValueFragment" rendered="#{dsf.datasetFieldType.compound}">
                                        <p:autoUpdate/>
                                        <div>
                                          <div id="metadata_#{dsf.datasetFieldType.name}" class="col-sm-3 control-label highlightBold">
                                            #{dsf.datasetFieldType.localeTitle}
                                            <span class="glyphicon glyphicon-asterisk text-danger" jsf:rendered="#{dsf.required}"/>
                                            <span class="glyphicon glyphicon-question-sign tooltip-icon"
                                                  data-toggle="tooltip" data-placement="auto right" data-original-title="#{dsf.datasetFieldType.localeDescription}"></span>
                                          </div>
                                          
                                          <div class="col-sm-7">
                                            <ui:fragment rendered="#{templatePage}">
                                              <h:outputLabel for="compinstr" value="#{bundle['template.instructions.label']} " title="#{bundle['template.instructions.label.tip']}" class="italic normal-text margin-right"/>
                                                <p:inplace id="compinstr" label="#{TemplatePage.getInstructionsLabelFor(dsf.datasetFieldType.name)}" editor="true">
                                                  <p:inputText value="#{TemplatePage.template.instructionsMap[dsf.datasetFieldType.name]}"/>
                                                </p:inplace>
                                            </ui:fragment>
                                           <h:outputText value="#{template.getInstructionsFor(dsf.datasetFieldType.name)}" rendered="#{!templatePage and template != null and ! empty template.getInstructionsFor(dsf.datasetFieldType.name)}"/>
                                          </div>
                                        </div> 
                                        <div class="col-sm-3"/>
                                        <div class="form-group form-col-container col-sm-9 dataset-field-values">
                                            <ui:fragment rendered="#{!dsf.required and dsf.hasRequiredChildren}">
                                                <p class="help-block">
                                                    <h:outputText value="#{bundle.conditionalRequiredMsg}"/>
                                                </p>
                                            </ui:fragment>
                                            <ui:repeat value="#{dsf.datasetFieldCompoundValues}" var="compoundValue" varStatus="valCount">
                                                <div class="form-group form-col-container col-sm-9 edit-compound-field"  data-cvoc-parentfield="#{cvocConf.containsKey(dsf.datasetFieldType.id)?cvocConf.get(dsf.datasetFieldType.id).getString('field-name'):''}">
                                                    <!-- Sub Fields -->
                                                    <ui:repeat value="#{compoundValue.childDatasetFields}" var="subdsf">
                                                        <div class="form-col-container #{subdsf.datasetFieldType.fieldType == 'TEXTBOX' ? 'col-sm-12' : 'col-sm-6'}">
                                                            <ui:fragment rendered="#{subdsf.datasetFieldType.name == 'dsDescriptionValue'}">
                                                                <p class="help-block">
                                                                    <h:outputText value="#{bundle.htmlAllowedMsg}" escape="false"/>
                                                                </p>
                                                            </ui:fragment>
                                                            <label jsf:for="#{subdsf.datasetFieldType.controlledVocabulary ? 'cvv_focus' : subdsf.datasetFieldType.fieldType == 'TEXTBOX' ? 'description' : cvocConf.containsKey(subdsf.datasetFieldType.id) ? 'cvocInputText' : cvocConf.containsKey(dsf.datasetFieldType.id) ? 'cvocInputText2' : 'inputText'}" class="control-label">
                                                                #{subdsf.datasetFieldType.localeTitle}
                                                                <span class="glyphicon glyphicon-asterisk text-danger" jsf:rendered="#{subdsf.required and dsf.required}"/>
                                                                <span class="glyphicon glyphicon-question-sign tooltip-icon"
                                                                      data-toggle="tooltip" data-placement="auto right" 
                                                                      data-original-title="#{subdsf.datasetFieldType.localeDescription}#{subdsf.required and !dsf.required?' – '.concat(bundle['conditionalRequiredMsg.tooltip']) : ''}"></span>
                                                            </label>
                                                            <ui:fragment rendered="#{!subdsf.datasetFieldType.controlledVocabulary}">
                                                                <ui:include src="datasetFieldForEditFragment.xhtml">
                                                                    <ui:param name="dsfv" value="#{subdsf.singleValue}"/>
                                                                    <ui:param name="dsfvIndex" value="0"/>
                                                                    <ui:param name="cvoc" value="#{cvocConf.containsKey(subdsf.datasetFieldType.id) ? cvocConf.get(subdsf.datasetFieldType.id) : cvocConf.containsKey(dsf.datasetFieldType.id)? cvocConf.get(dsf.datasetFieldType.id): cvocConf.containsKey(dsfv.datasetField.datasetFieldType.id)? cvocConf.get(dsfv.datasetField.datasetFieldType.id): null}"/>
                                                                </ui:include>
                                                            </ui:fragment>
                                                            <!-- MOVED SELECT ONE TO dataFieldForEdit -->
                                                            <div jsf:rendered="#{subdsf.datasetFieldType.controlledVocabulary}" data-cvoc-managed-field="#{settingsWrapper.isCvocField(subdsf.datasetFieldType.id)? subdsf.datasetFieldType.name : ''}">
                                                                <p:selectOneMenu id="cvv" value="#{subdsf.singleControlledVocabularyValue}" converter="controlledVocabularyValueConverter" style="width: auto !important; max-width:100%; min-width:200px;"
                                                                                 rendered="#{!subdsf.datasetFieldType.allowMultiples}" filter="#{(subdsf.datasetFieldType.controlledVocabularyValues.size() lt 10) ? 'false':'true'}" filterMatchMode="contains" >
                                                                    <f:selectItem itemLabel="#{bundle.select}" itemValue="" noSelectionOption="true"/>
                                                                    <f:selectItems value="#{subdsf.datasetFieldType.controlledVocabularyValues}" var="cvv" itemLabel="#{cvv.getLocaleStrValue(mdLangCode)}" itemValue="#{cvv}" />
                                                                </p:selectOneMenu>
                                                                <!--
                                                                <p:outputPanel id="selectedValsListCompound" style="padding-top:.5em;">
                                                                    <ui:repeat value="#{subdsf.controlledVocabularyValues}" var="cvv" rendered="#{!empty subdsf.controlledVocabularyValues}">
                                                                        <h:outputText value="#{cvv.getLocaleStrValue(mdLangCode)}"  style="margin-right:.5em;display:inline-block;"/>
                                                                    </ui:repeat>
                                                                </p:outputPanel>
                                                                -->
                                                                <ui:remove>
                                                                <!-- Todo: If there are instances of multi-val cvv in a compound field, some addition will probably be needed for accessibility -
                                                                     to associate this field with the label above (as was done in this commit for the single value cvv in a compound field case).
                                                                     I did that by inspecting the html source produced, so skipping this unless/until I find an example. 
                                                                -->
                                                                </ui:remove> 
                                                                    <p:selectCheckboxMenu value="#{subdsf.controlledVocabularyValues}" converter="controlledVocabularyValueConverter"
                                                                                          rendered="#{subdsf.datasetFieldType.allowMultiples}" label="#{bundle.select}" multiple="true"
                                                                                          filter="#{(subdsf.datasetFieldType.controlledVocabularyValues.size() lt 10) ? 'false':'true'}" filterMatchMode="contains" 
                                                                                          showHeader="#{(subdsf.datasetFieldType.controlledVocabularyValues.size() lt 10) ? 'false':'true'}">
                                                                        <f:selectItems value="#{subdsf.datasetFieldType.controlledVocabularyValues}" var="cvv" itemLabel="#{cvv.getLocaleStrValue(mdLangCode)}" itemValue="#{cvv}" />
                                                                    </p:selectCheckboxMenu>

                                                                <div class="ui-message ui-message-error ui-widget ui-corner-all" aria-live="polite" jsf:rendered="#{!empty subdsf.validationMessage}">
                                                                    <span class="ui-message-error-detail">#{subdsf.validationMessage}</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </ui:repeat>
                                                </div>
                                                <div class="col-sm-3 field-add-delete" jsf:rendered="#{dsf.datasetFieldType.allowMultiples and !dsf.datasetFieldType.controlledVocabulary}">
                                                    <p:commandLink title="#{bundle.add}"
                                                                   styleClass="btn btn-default btn-sm bootstrap-button-tooltip #{dsf.datasetFieldType.compound ? 'compound-field-btn' : ''}"
                                                                   actionListener="#{dsf.addDatasetFieldCompoundValue(valCount.index + 1)}"   
                                                                   update=":#{p:resolveClientIds('@id(editCompoundValueFragment)', view)}">
                                                        <span class="glyphicon glyphicon-plus no-text"/>
                                                    </p:commandLink>
                                                    <p:commandLink title="#{bundle.delete}"
                                                                   styleClass="btn btn-default btn-sm bootstrap-button-tooltip #{dsf.datasetFieldType.compound ? 'compound-field-btn' : ''}"
                                                                   rendered="#{dsf.datasetFieldCompoundValues.size() > 1}"
                                                                   actionListener="#{dsf.removeDatasetFieldCompoundValue(valCount.index)}"
                                                                   update=":#{p:resolveClientIds('@id(editCompoundValueFragment)', view)}">
                                                        <span class="glyphicon glyphicon-minus no-text"/>
                                                    </p:commandLink>
                                                </div>
                                            </ui:repeat>
                                        </div>
                                    </p:fragment>
                                </div>
                            </ui:repeat>
                        </div>
                    </div>
                </div>
            </ui:repeat>
        </div>
        </p:fragment>
    </ui:fragment>
 <script>
    //<![CDATA[
    $(document).ready(function() {
      //The select2 widget used in external vocab scripts has trouble determining the width of an input field if it is initially hidden
      //Starting with the metadatablocks displayed and collapsing them here is a work-around to fix that.
      if(#{(editMode != 'CREATE') && !cvocConf.isEmpty()}) {
        for(let i=1;i< #{fn:length(metadataBlocks)};i++) {
          $('#panelCollapse'+i).collapse('hide');
        }
      }
    });
    //]]>
    </script>
</ui:composition>
